@charset "UTF-8";

/* 深蓝 #7C9AAB */
/* 浅蓝 #B4D1E1 */
/* 绿色 #3A97AB */
/* 白色 #F7FCFD */
/* 粉色 #FCD9DD */

body {
    background: url(/img/bg3.jpg) repeat 0 0;
    font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", STXihei, "Microsoft YaHei", SimHei, "WenQuanYi Micro Hei" !important;
}

.index-container {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 50%;left: 50%;
    transform: translate(-50%, -50%);
    background-color: #F7FCFD;
    border-radius: 8px;
    width: 30em;
    height: 25em;
    box-shadow: rgba(0,0,0,.2)  0 1px 5px 0px;
}
.index-container .my-info {
    width: 100%;
    flex: 0.75;
    border-radius: 8px 8px 0 0;
    perspective: 1000px;
}
.index-container .my-info .flipper{
    position: relative;
    transition: all 1s;
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.index-container .my-info .flipper .avatar, .index-container .my-info .flipper .info{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 10px 15px 10px 15px;
    -moz-box-sizing: border-box; /*Firefox3.5+*/
    -webkit-box-sizing: border-box; /*Safari3.2+*/
    -o-box-sizing: border-box; /*Opera9.6*/
    -ms-box-sizing: border-box; /*IE8*/
    box-sizing: border-box; 
    line-height: 30px;
    font-size: 18px;
    color: #f2f2f2;
    font-weight: 500;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px 8px 0 0;
    background: url(/img/bg4.png) no-repeat center center;
    background-size: cover;
    backface-visibility: hidden;
}
.index-container .my-info .avatar .thumb{
    flex: 0.3;
    max-width: 100px;
    height: 100px;
    border: #f2f2f2 solid 2px;
    box-sizing: border-box;
    border-radius: 6px;
    background: url(/img/thumb.png) no-repeat center center;
    background-size: cover;
}
.index-container .my-info .avatar .desc {
    flex: 0.5;
}
.index-container .my-info .avatar .desc p {
    text-indent: 2em;
}
.index-container .my-info .info {
    transform: rotateX(180deg);
    background-color: #506D80;
    flex-direction: column;
    justify-content: center !important;
}


.index-container .nav {
    flex: 0.25;
    width: 100%;
    border-radius: 0 0 8px 8px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: #fff;
}
.index-container .nav .nav-item {
    flex: 0.25;
    height: 50%;
    perspective: 100px;
    transform-style: preserve-3d;
    
    
}
.index-container .nav .nav-item span {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 4px;
    display: flex;
    font-size: 15px;
    font-weight: 600;
    color: rgba(51, 44, 27, .8);
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all .5s;
}
.index-container .nav .nav-item:hover span{
    transform: rotate3d(1, -1, 0, 10deg);
    background-color: #ABBCDA;
    box-shadow: rgba(0,0,0, .3)  0 1px 5px 0px;

}

